<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">

<head>
    <th:block th:include="include :: header('预警查询')" />
    <th:block th:include="include :: layout-latest-css" />
    <th:block th:include="include :: ztree-css" />
</head>
<style>
    #bootstrap-table tbody tr {
        position: relative;
    }

    #noneBox {
        position: absolute;
        width: 350px;
        height: 250px;
        top: 78px;
        left: 20%;
        /* display: none; */
        background-color: #e8e8e8;
        z-index: 100;
        border-radius: 10px;
        padding-left: 10px;
    }

    #noneBox::after {
        content: "";
        position: absolute;
        top: -20px;
        left: 50%;
        transform: translate(-50%);
        left: 50%;
        border-top: 10px solid transparent;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-bottom: 10px solid black;
    }

    .tip_text {
        position: absolute;
        top: 36px;
        left: 38%;
        width: max-content;
        font-size: 12px;
        font-weight: 400;
        word-break: break-word;
        padding: 6px 8px;
        border-radius: 4px;
        z-index: 99999;
        background: #fff;
        border: 1px solid #303133;
        color: #303133;
    }

    .tip_text::after {
        content: "";
        position: absolute;
        top: -15px;
        left: 50%;
        transform: translate(-50%);
        left: 50%;
        border-top: 7px solid transparent;
        border-left: 7px solid transparent;
        border-right: 7px solid transparent;
        border-bottom: 7px solid black;
    }
</style>

<body class="gray-bg">
    <div class="ui-layout-center">
        <div class="container-div">
            <div class="row">
                <div class="col-sm-12 search-collapse">
                    <form id="notice-form">
                        <div class="select-list">
                            <ul>
                                <li>
                                    场景名称：<input type="text" name="sceneName" placeholder="请输入场景名称" />
                                </li>
                                <li>
                                    预警方式：
                                    <select name="warningType" lay-verify="required" class="selects">
                                        <option value="">请选择</option>
                                        <option value="0">同比预警</option>
                                        <option value="1">环比预警</option>
                                        <!-- <option value="2">离散预警</option> -->
                                    </select>

                                </li>
                                <li>
                                    时间：
                                    <input type="date" name="warningTime" class="layui-input startTime" />
                                </li>

                                <li>
                                    <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i
                                            class="fa fa-search"></i>&nbsp;查询</a>
                                    <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i
                                            class="fa fa-refresh"></i>&nbsp;重置</a>
                                </li>
                            </ul>
                        </div>
                    </form>
                </div>

                <div class="col-sm-12 select-table table-striped">
                    <table id="bootstrap-table"></table>
                </div>
            </div>
        </div>
    </div>


    <!-- 这是查看详情点位的列表 -->
    <div class="modal inmodal fade" id="myModal6" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <small class="font-bold">数据点位列表
                </div>
                <div class="modal-body">
                    <form id="proint-form">
                        <input type="hidden" id="sceneId" name="sceneId" />
                    </form>
                    <!-- 右侧场景表格 -->
                    <div class="col-sm-12 select-table table-point">
                        <!-- 这是表格列表显示 -->
                        <table id="positionTable"></table>
                    </div>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-dismiss="modal" id="close">关闭</button>
                </div>
            </div>
        </div>
    </div>

    <th:block th:include="include :: footer" />
    <th:block th:include="include :: layout-latest-js" />
    <th:block th:include="include :: ztree-js" />
    <script src="/js/echarts.min.js" th:href="@{/js/echart.min.js}"></script>
    <script src="/js/echarts.js" th:src="@{/js/echarts.js}"></script>
    <script src="/js/ecStat.js" th:href="@{/js/ecStat.js}"></script>
    <script src="/js/ecStat.min.js" th:href="@{/js/ecStat.min.js}"></script>

    <script th:inline="javascript">
        var removeFlag = [[${@permission.hasPermi('system:notice:remove') }]];
        var types = [[${@dict.getType('sys_notice_type') }]];
        var datas = [[${@dict.getType('sys_notice_status') }]];
        var prefix = "";//"http://localhost:8002/";

        $(function () {
            var panehHidden = false;
            if ($(this).width() < 769) {
                panehHidden = true;
            }
            $('body').layout({ initClosed: panehHidden, west__size: 185 });
            // 回到顶部绑定
            if ($.fn.toTop !== undefined) {
                var opt = {
                    win: $('.ui-layout-center'),
                    doc: $('.ui-layout-center')
                };
                $('#scroll-up').toTop(opt);
            }
            queryUserList();
        });

        function queryUserList() {
            var options = {
                url: prefix + "/earlyWarningRecord/list2",
                createUrl: prefix + "/add",
                updateUrl: prefix + "/edit/{id}",
                removeUrl: prefix + "/youtian/failureRateMonitor/remove",
                modalName: "公告",
                columns: [{
                    checkbox: true
                },
                {
                    field: 'sceneName',
                    title: '场景名称',
                    width: "15%",
                    align: "center"
                },
                {
                    field: 'warningName',
                    title: '预警名称',
                    align: 'center',
                    width: "15%",
                },
                {
                    field: 'warningTime',
                    title: '预警时间',
                    width: "15%",
                    align: 'center',
                },
                {
                    field: 'warningRemark',
                    title: '预警说明',
                    width: "15%"
                },
                {
                    field: 'alarmValue',
                    title: '几率值',
                    width: "10%",
                    align: "center",
                    formatter: function (value, row, index) {

                        return alarmValue = value * 100 + "%";
                    }
                },
                {
                    field: 'warningType',
                    title: '预警方式',
                    width: "10%",
                    align: "center",
                    formatter: function (value, row, index) {
                        if (value == 0) {
                            return warningType = '同比预警'
                        } else if (value == 1) {
                            return warningType = '环比预警'
                        } else if (value == 2) {
                            return warningType = '离散预警'
                        }
                    }
                },
                {
                    title: '操作',
                    align: 'center',
                    width: "10%",
                    formatter: function (value, row, index) {
                        var actions = [];
                        actions.push(`<a class="btn btn-success btn-xs ' + '" href="javascript:void(0)" onclick="edit('${row.sceneId}')" style="display:inline-block;margin-right:10px;"><i class="fa fa-gear" ></i>查看详情</a>`)
                        actions.push('<a class="btn btn-danger btn-xs ' + removeFlag + '" href="javascript:void(0)" onclick="$.operate.remove(\'' + row.noticeId + '\')"><i class="fa fa-remove"></i>删除</a>');
                        return actions.join('');
                    }
                }]
            };
            $.table.init(options);
        };


        //查看场景下的点位详情
        function queryScenePointList(id) {
            var options = {
                id: 'positionTable',
                url: `/youtian/scene-category/scencePointlist?sceneId=${id}`,
                method: 'get',
                onClickRow: onClickRow,
                // rowStyle:onRowStyle,// 根据条件渲染表格的行样式
                columns: [
                    {
                        field: 'pointName',
                        title: '采集数据点位',
                        align: "center"
                    },
                    {
                        field: 'sceneName',
                        title: '所属区',
                        align: "center"
                    },
                    {
                        field: 'deptName',
                        title: '所属单位',
                        align: "center"
                    },
                    {
                        field: 'dataState',
                        title: '状态',
                        align: "center",
                        formatter: function (value, row, index) {
                            if ($.trim(value) == "正常") {
                                return `<span style='color: #f00; font-weight: bold;'>${value}</span>`
                            }
                            return value
                        }
                    },
                    {
                        field: 'lowerLimit',
                        title: '下限',
                        align: "center"
                    },
                    {
                        field: 'upperLimit',
                        title: '上限',
                        align: "center"
                    }
                ]
            }
            //初始化监测点表格
            $.table.init(options);
        }

        $('#close').on('click', function () {
            $.table.destroy("positionTable");
            $('#myModal6').modal('hide');
        })

        function edit(row) {
            var rowJson = row.split(',');
            let id = rowJson[0];
            $('#sceneId').val(id)
            $('#myModal6').modal('show')
            queryScenePointList(id)
        }

        var setTimeData = "";
        let list = {};
        $('#positionTable').mouseleave(function () {
            clearInterval(setTimeData)
            // $("#noneBox").remove()
        })
        function onClickRow(row, el) {
            console.log(row, el, '---->');
            clearInterval(setTimeData);

            let echartDom = el.children("#noneBox");

            if (echartDom[0]) {
                return echartDom.remove();
            }
            let sourceTag = row.pointId;
            list = {
                currentsourceId: sourceTag,
                historysourceId: sourceTag,
                // reostartTime:startTime,
                // reoendTime:endTime
            };
            $.ajax({
                // url: `/youtian/scene-category/selectSourceTagHistoryListBySourceTag`,
                url: `/youtian/workspace-category/getLineargraph`,
                type: "post",
                dataType: "json",
                data: JSON.stringify(list),
                headers: { "Content-Type": "application/json" },
                success: function (res) {
                    console.log(res, "res");
                    el.mouseleave(function () {
                        $(".tip_text").remove();
                    });
                    if (res.data.length <= 0) {
                        $(".tip_text").remove();
                        return el.append(`<div class="tip_text">暂无数据</div>`);
                    }
                    $("#noneBox").remove();
                    el.append(`<div id="noneBox"></div>`);
                    echart()
                },
            });
        }

        //散点图
        function echart() {
            var dom = document.getElementById('noneBox');
            var myChart = echarts.init(dom, null, {
                renderer: 'canvas',
                useDirtyRect: false
            });
            var app = {};

            var option;

            // See https://github.com/ecomfe/echarts-stat
            echarts.registerTransform(ecStat.transform.regression);
            option = {
                dataset: [{
                    source: [
                        [1, 4862.4],
                        [2, 5294.7],
                        [3, 5934.5],
                        [4, 7171.0],
                        [5, 8964.4],
                        [6, 10202.2],
                        [7, 11962.5],
                        [8, 14928.3],
                        [9, 16909.2],
                        [10, 18547.9],
                        [11, 21617.8],
                        [12, 26638.1],
                        [13, 34634.4],
                        [14, 46759.4],
                        [15, 58478.1],
                        [16, 67884.6],
                        [17, 74462.6],
                        [18, 79395.7]
                    ]
                },
                {
                    transform: {
                        type: 'ecStat:regression',
                        config: {
                            method: 'exponential'
                            // 'end' by default
                            // formulaOn: 'start'
                        }
                    }
                }
                ],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross'
                    }
                },
                xAxis: {
                    splitLine: {
                        lineStyle: {
                            type: 'dashed'
                        }
                    }
                },
                yAxis: {
                    splitLine: {
                        lineStyle: {
                            type: 'dashed'
                        }
                    }
                },
                series: [{
                    name: 'scatter',    //鼠标悬浮显示的的名称
                    type: 'scatter',
                    datasetIndex: 0
                },
                {
                    name: 'line',
                    type: 'line',
                    smooth: true,
                    datasetIndex: 1,
                    symbolSize: 0.1,
                    symbol: 'circle',
                    labelLayout: {
                        dx: -20
                    },
                    encode: {
                        label: 2,
                        tooltip: 1
                    }
                }
                ]
            };


            if (option && typeof option === 'object') {
                myChart.setOption(option);
            }

            window.addEventListener('resize', myChart.resize);
        }


    </script>
</body>

</html>